<template>
    <!-- 头部组件 -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
        router
    >
        <el-menu-item index="1">
            <strong>
                <el-tag class="mx-1" effect="dark" round>展示全部</el-tag>
            </strong>
        </el-menu-item>
        <el-menu-item v-for="(val,index) in typeData" :key="index" :index=" 'index' " class="m-1">
            <el-tag class="mx-1" effect="dark" round>
                <strong>{{ val.typeName }}</strong>
            </el-tag>
            
        </el-menu-item>
        <div class="flex-grow" />
        <el-sub-menu index="2">
            <el-menu-item @click="checkLogin" index="#">
                <span>
                    <el-icon><User /></el-icon>
                    登录/注册
                </span>
            </el-menu-item>
            <template #title>
                <el-icon><Flag /></el-icon>
                个人设置
            </template>
            <el-menu-item index="2-1">
                <el-icon><MagicStick /></el-icon>
                兴趣分类设置
            </el-menu-item>
            <el-menu-item index="2-2">
                <el-icon><Medal /></el-icon>
                显示内容配置
            </el-menu-item>
            <el-sub-menu index="2-4">
                <template #title>
                    <el-icon><Setting /></el-icon>
                    其他系统配置
                </template>
                <el-menu-item index="2-4-1">item one</el-menu-item>
            </el-sub-menu>
            <el-menu-item v-if="isLogin" index="#">
                <span @click="userLogout">
                    <el-icon><Pointer /></el-icon>
                    退出登录
                </span>
                
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script>
import { getCurrentInstance, defineComponent, ref, reactive,onMounted} from 'vue';
import { User,Pointer,Flag,MagicStick,Medal,Setting } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { $http } from '@/utils/axios.js'
import {debounce, gatewayPrefix, userMiddleContextPath,currentUser,token} from '@/utils/commConstance'
import {getArticleType} from '@/utils/commDataFun'
import router from '@/router';
export default defineComponent ({
    components:{
        User,Pointer,Flag,MagicStick,Medal,Setting
    },
    setup(){
        const activeIndex = ref('1')
        let isLogin = ref(true)
        onMounted(()=>{
            typeData.value = getArticleType()
            let authorization = sessionStorage.getItem(token)
            let userInfo = sessionStorage.getItem(currentUser)
            if(authorization != null && userInfo != null){
                isLogin.value = true
            }
        })
        let typeData = ref([])
        const handleSelect = (key, keyPath) => {
            console.log(key, keyPath)
        }
        //退出登录
        const userLogout = ()=>{
            ElMessageBox.confirm(
                '确定退出登录?',
                '警告提示',
                {
                    confirmButtonText: '确定退出',
                    cancelButtonText: '取消',
                    type: 'warning',
                    draggable: true,
                }
            ).then(() => {
                let userInfo = JSON.parse(sessionStorage.getItem(currentUser));
                if(userInfo == null){
                    return ElMessage.warning('登录信息为空,退出失败')
                }
                $http.get(`${gatewayPrefix}/${userMiddleContextPath}/userOperation/planetUserLogout?account=${userInfo.loginAccount}`).then((res)=>{
                    if(res){
                        ElMessage.success('退出成功')
                        sessionStorage.clear()
                        localStorage.clear()
                        router.push('/freePlanetIndex')
                    }
                }).catch((err)=>{
                    console.log('退出登录失败：',err);
                    ElMessage.error('退出失败,请联系管理员')
                })
            }).catch(() => {
                ElMessage.info('取消操作')
            })
        }
        const checkLogin = ()=>{
            let authorization = sessionStorage.getItem(token)
            let userInfo = sessionStorage.getItem(currentUser)
            if(authorization != null && userInfo != null){
                return ElMessage.warning('当前用户已登录,请勿重复登录')
            }
            router.push('/userLogin')
        }
        //
        return{
            activeIndex,
            handleSelect,
            userLogout,
            isLogin,
            checkLogin,
            typeData
        }
    }
});
</script>

<style src = "../assets/css/planetHeader.css" scoped></style>